@<template>
  <div>
         <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>分类管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card>
         <!-- 添加分类按钮 -->
    <el-row class="add-cate">
        <el-col>
            <el-button @click="addCate"  type="primary">添加分类</el-button>
        </el-col>
    </el-row>
    <!-- 表格 -->
    <tree-table :data="goodsCateList.result" :columns="columns"
    :selection-type="false" :expand-type="false" show-index index-text=""
    border :show-row-hover="false"
    >
    <!-- 自定义插槽   -->

    <!-- 是否有效插槽 -->
    <template slot="isOk" slot-scope="scope" >
        <i style="color: lightgreen" 
        v-if="scope.row.cat_deleted==false" 
        class="el-icon-success"></i>
        <i style="color: red" v-else 
        class="el-icon-success"></i>
    </template>

    <!-- 排序插槽 -->
    <template slot="order" slot-scope="scope">
        <el-tag v-if="scope.row.cat_level===0">一级</el-tag>
        <el-tag v-else-if="scope.row.cat_level===1" type="success">二级</el-tag>
        <el-tag v-else type="warning">三级</el-tag>
    </template>

    <!-- 操作 -->
    <template slot="opt">
        <el-button size="mini" type="primary" class="el-icon-edit">编辑</el-button>
        <el-button size="mini" type="danger" class="el-icon-delete">删除</el-button>
    </template>
        
    </tree-table>

    <!-- 分页区域 -->
    <el-pagination
      @size-change="cateSizeChange"
      @current-change="cateCurrentChange"
      :current-page="addCateForm.pagenum"
      :page-sizes="[1, 5, 10, 15]"
      :page-size="addCateForm.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="goodsCateList.total">
    </el-pagination>

    <!-- 渲染分类列表区域 -->
    <!-- <el-table border stripe :data="goodsCateList.result" style="width:100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="cat_name" label="分类名称"></el-table-column>
        <el-table-column prop="cat_deleted" label="是否有效">
            <template>
                <el-result icon="success" ></el-result>
            </template>
        </el-table-column> -->

        <!-- 排序区域 -->
        <!-- <el-table-column prop="cat_level" label="排序">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.cat_level == 0">一级</el-tag>
                <el-tag  v-else-if="scope.row.cat_level == 1" type="success">二级</el-tag>
                <el-tag  v-else type="warning">三级</el-tag>
            </template>
        </el-table-column> -->

        <!-- 操作区域 -->
        <!-- <el-table-column  label="操作">
            <template>
                <el-button type="primary" 
                 icon="el-icon-edit"
                size="mini"
                >编辑</el-button>
                <el-button type="danger"
                icon="el-icon-delete"
                size="mini"
                >删除</el-button>
            </template>
        </el-table-column>
    </el-table> -->

    </el-card>

    <!-- 添加商品分类对话框 -->
    <el-dialog
    title="添加分类"
    :visible.sync="addCateDialogVisible"
    width="50%"
    @close="closedDialog"
    >
    <!-- 添加分类的表单 -->
    <el-form  ref="addCateFormRef" :model="addCateForm" 
    label-width="100px" :rules="addCateFormRules">
        <el-form-item label="分类名称:" prop="cat_name">
            <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类:" >
            <!-- 渲染父级分类级联列表 -->
            <!-- options为数据源 -->
            <!-- props 用来指定配置对象 -->
            <!-- v-model 存放的数组对象 -->
            <el-cascader 
                v-model="selectedKeys"
                :options="parentCateList"
                :props="addCateProps"
                @change="cateHandleChange"
                clearable change-on-select
                >
            </el-cascader>
        </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAddCate">确 定</el-button>
    </span>
    </el-dialog>
   
  </div>
</template>

<script>
export default {
    data() {
        return {
            // 分类数据对象
            goodsCateList: {},
            /**
             * pagenum: 0
                pagesize: 5
                result: Array(5)
                total: 30
             */

            // 查询条件
            cateParam: {
                type: 3,
                pagenum: 1,
                pagesize: 5,
            },
            // 控制添加分类对话框是否显示
            addCateDialogVisible: false,

            // 添加分类的表单数据对象
            addCateForm: {
                // 分类的父级id
                cat_pid: 0,
                // 分类名称
                cat_name:'',
                // 默认添加一级分类
                cat_level: 0
            },
            // 添加分类的表单验证规则
            addCateFormRules: {
                cat_name: [
                    {required: true, message: '请输入分类名称', trigger: 'blur'}
                ]
            },

            // 父级分类列表
            parentCateList: [],

            // 级联选择器配置对象
            addCateProps: {
                expandTrigger: 'hover',
                value: 'cat_id',
                label: 'cat_name',
                children: 'children'
            },
            // 选中的父级分类id数组
            selectedKeys: [],

            // 为table指定 列的定义
            columns: [
                {
                    label: '分类名称',
                    prop: 'cat_name'
                },
                {
                    label: '是否有效',
                    // 表示当前为模板列
                    type: 'template',
                    // 模板名称
                    template: 'isOk'
                },
                {
                    label: '排序',
                    // 表示当前为模板列
                    type: 'template',
                    // 模板名称
                    template: 'order'
                },
                {
                    label: '操作',
                    type: 'template',
                    template: 'opt'
                }
             
            ]
        }
    },
    
    created() {
        this.getGoodsCateList()
    },
    methods: {
        // 获取商品分类列表
        async getGoodsCateList() {
            // 发起请求
            const {data: res } = await this.$http.get('categories', {params: this.cateParam})
            if(res.meta.status != 200 ) {
                return this.$message.error("获取商品分类失败")
            }


            // 保存分类数据
            this.goodsCateList = res.data
            console.log(res.data)
            
        },
        // 分页 展示数据条数发生变化
        cateSizeChange(newSize) {
            this.cateParam.pagesize = newSize;
            this.getGoodsCateList();
        },
        // 分页 页面索引发生变化
        cateCurrentChange(newNum) {
            this.cateParam.pagenum = newNum;
            this.getGoodsCateList();
        },
        // 添加商品分类
        addCate() {
            this.getParentCateList()
            // 展示对话框
            this.addCateDialogVisible = true
        },
        // 确认添加分类
        confirmAddCate() {
            // 表单预验证
            this.$refs.addCateFormRef.validate(async result => {
                if(!result) return
                // 验证通过 开始发送请求
                const {data: res} = await this.$http.post('categories',this.addCateForm)
                console.log(res)
                if(res.meta.status != 201) {
                    return this.$message.error('添加分类失败')
                }
                this.$message.success("添加分类成功")
                this.getGoodsCateList();
            })

            // 关闭对话框
            this.addCateDialogVisible = false;
        },
        // 对话框关闭处理函数
        closedDialog() {

            // 重置级联选择框
            this.selectedKeys = []
            this.addCateForm.cat_level = 0
            this.addCateForm.cat_pid = 0
            // 刷新form表单
            this.$refs.addCateFormRef.resetFields();
        },
        // 获取父级分类的数据列表
        async getParentCateList() {
            const {data: res} = await this.$http.get(
                'categories',{params: {type: 2}})
            if(res.meta.status != 200) {
                return this.$message.error("获取父级分类列表失败")
            }
            this.parentCateList = res.data
            console.log(this.parentCateList)

        },
        // 父级分类级联选择框变化触发的函数
        cateHandleChange() {
            // 判断如果长度大于0,说明有选择父级
            if(this.selectedKeys.length > 0) {
                // 设置自身等级
                this.addCateForm.cat_level = this.selectedKeys.length;
                // 设置父类等级,
                this.addCateForm.cat_pid= this.selectedKeys[this.selectedKeys.length-1]
                console.log(this.addCateForm)
            }else {
            // 如果长度等于0,说明为选择父类,自己就是第一等级
                 // 设置自身等级
                this.addCateForm.cat_level = 0
                // 设置父类等级,父类id总在数组最后一位,所有pop取出
                this.addCateForm.cat_pid= 0
                console.log(this.addCateForm)
                
            }
            
        }
    }
}
</script>

<style lang="less" scope>
.el-cascader {
    width: 100%;
}
.add-cate {
    margin-bottom: 15px;
}
</style>